<template>
  <el-row type="flex" justify="space-between" align="middle">
    <!-- <el-col :sm="24" :md="12" class="hidden-sm-and-down">
      <img src="@assets/image/login_left.png" class="img-fluid" alt="Responsive image">
    </el-col> -->
    <el-col>
      <div class="login-frame">
        <div class="login-item login-item-text">
          <i class="fas fa-user" />
          <input v-model="user.id" class="login-item-input" placeholder="请输入用户名" autocomplete="off">
        </div>
        <div class="login-item login-item-text">
          <i class="fas fa-key" />
          <input v-model="user.password" class="login-item-input" placeholder="请输入密码" autocomplete="new-password" type="password">
        </div>
        <div class="login-item login-item-href">
          <input class="login-item-button" type="button" value="登录" @click="$emit('signIn',user,$event)">
        </div>
        <!-- <div class="login-item login-item-href">
                <a href="#">忘记密码？</a>
                <a href="#">注册新用户</a>
            </div>
            <div class="login-item login-item-other">
                <i></i>
                <p>其他方式登陆</p>
                <i></i>
            </div>
            <div class="login-item login-item-3rd">
                <i class="fab fa-qq"></i>
                <i class="fab fa-weixin"></i>
                <i class="fab fa-weibo"></i>
            </div> -->
      </div>
    </el-col>
  </el-row>
</template>
<script>
import 'element-ui/lib/theme-chalk/display.css'
export default {
  name: 'SignIn',
  data() {
    return {
      user: {
        id: null,
        password: null
      },
      loginWeb: false
    }
  }
}
</script>
<style scoped>
::-webkit-input-placeholder {
  color: #6fffe9;
}
:-moz-placeholder {
  color: #6fffe9;
}
::-moz-placeholder {
  color: #6fffe9;
}
:-ms-input-placeholder {
  color: #6fffe9;
}
.login-frame {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}
.login-item {
  margin: 1rem;
}
.login-item-text {
  display: flex;
  align-items: center;
  padding: 0 0 .5rem 2rem;
  border-bottom: .1rem solid;
}
.login-item-input {
  flex-grow: 1;
  margin-left: 2rem;
  padding-left: 2rem;
  border: none;
  border-left: .1rem solid;
  color: #6fffe9;
  background: transparent;
  outline: none;
}
.login-item-button {
  flex-grow: 1;
  padding: 0.6rem 2rem;
  border: none;
  border-radius: .2rem;
  background: #6fffe9;
}
.login-item-href {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.login-item-href a {
  padding: 0 2rem;
  border-right: solid 1px #6fffe9;
  line-height: 2rem;
  /* color: #6fffe9; */
  text-decoration: none;
}
.login-item-href a:last-child {
  border-right: none;
}
.login-item-href a:hover {
  color: #6fffe9;
}
.login-item-other {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-item-other i {
  flex-grow: 1;
  border-bottom: solid 1px #6fffe9;
}
.login-item-other p {
  margin: 0 2rem;
  /* font-size: 1.5rem; */
  letter-spacing: 0.3rem;
}
.login-item-3rd {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* font-size: 4rem; */
}
.img-fluid {
  width: 100%;
  height: auto;
}
.login-more {
  cursor: pointer;
  padding-top: .5rem;
  /* font-size: 1.5rem; */
  width:1.5em;
  height:1.5em;
}
</style>
